<template>
    <div>
        <h1>ref函数用法</h1>
        <hr>
        <ul>
            <li>{{count}}</li>
            <li>
                <button @click="add">add</button>
            </li>
            <li>{{obj}}</li>
            <li>
                 <button @click="changeObj">add</button>
            </li>
            <li>{{list}}</li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</template>

<script>
/**
 * 作用：ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象
 * **使用步骤**
 * 语法：const 变量名 = ref(任意类型的默认值) =》访问修改：变量名.value
1. 从vue框架中导出`ref`函数
2. 在setup函数中调用`ref`函数并传入数据（简单类型或者复杂类型）
3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
4. **注意⚠️：**在setup函数中使用ref结果，需要通过`.value`  访问，模板中使用不需要加.value；而且可以重新=号赋值
 */
import { ref } from 'vue'
export default {
  setup () {
    //   1.简单类型
    const count = ref(0)

    // 点击加1
    const add = () => {
      count.value++
    }

    // 2.复杂类型
    const obj = ref({
      name: '小明'
    })

    const list = ref([1, 2, 3])

    const changeObj = () => {
      // obj.value.name = '小红'
    //   obj.value = {
    //     age: 100
    //   }
      list.value.push(Math.random() * 1000)
    }
    return { count, add, obj, list, changeObj }
  }
}
</script>

<style lang="scss" scoped>

</style>
